.md-text .tag-plugin.reel
  display: flex
  flex-direction: column
  align-items: center
  padding-top: var(--gap-padding)
  padding-bottom: var(--gap-padding)
  >.content
    display: flex
    flex-direction: column
    writing-mode: vertical-rl
    border-top: 1px dashed var(--text-meta)
    border-bottom: 1px dashed var(--text-meta)
    max-width: calc(100% - 80px)
    padding: 1rem
    >.title
      font-weight: 500
      font-size: 1rem
    >.meta
      color: var(--text-p2)
      font-size: $fs-12
      font-weight: 500  
    >.body
      overflow: auto
      scrollbar()
      margin: 'calc(%s - 4px) %s' % var(--gap-padding)
      .main
        p
          margin: 0;
          font-size: $fs-14
    >.date
      color: var(--text-p2)
      font-size: $fs-12
      font-weight: 500
      text-align: right
      // margin-left: var(--gap-p)
    >.footer
      color: var(--text-p4)
      font-size: $fs-12
      text-align: right

// 描边修饰
.md-text .tag-plugin.reel>.content
  position: relative
  &:before
    content: ''
    position: absolute
    width: 4px
    left: -4px
    top: -16px
    bottom: -16px
    border-radius: 4px
    background: var(--block)
  &:after
    content: ''
    position: absolute
    width: 4px
    left: calc(100%)
    top: -16px
    bottom: -16px
    border-radius: 4px
    background: var(--block)
  >.title
    position: relative
    &:before
      content: ''
      position: absolute
      width: 4px
      right: calc(-1rem - 4px)
      top: calc(-1rem - 6px)
      bottom: calc(100% + 1rem - 6px)
      border-radius: 4px
      background: $color-accent
      z-index: 1
    &:after
      content: ''
      position: absolute
      width: 4px
      right: calc(-1rem - 4px)
      top: calc(100% + 1rem - 6px)
      bottom: calc(-1rem - 6px)
      border-radius: 4px
      background: $color-accent
      z-index: 1
  >.footer
    position: relative
    &:before
      content: ''
      position: absolute
      width: 4px
      left: calc(-1rem - 4px)
      top: calc(-1rem - 6px)
      bottom: calc(100% + 1rem - 6px)
      border-radius: 4px
      background: $color-accent
    &:after
      content: ''
      position: absolute
      width: 4px
      left: calc(-1rem - 4px)
      top: calc(100% + 1rem - 6px)
      bottom: calc(-1rem - 6px)
      border-radius: 4px
      background: $color-accent